<extend name="Layout:layout_content" />
<block name="head_after">
    <style type="text/css">
        .xsui-gallery-item { width:200px; line-height: 21px; float:left; margin: 15px 10px 0 0;}
        .xsui-gallery-item a { color:#555;}
        .xsui-gallery-item img { width:200px; height:200px;}
        .xsui-gallery-item .title { padding:5px 0; text-align: left; font-weight: bold;}
        .xsui-gallery-item .title input { vertical-align: middle; margin-right: 2px; }
        .xsui-gallery-item table { width:100%; }
        .xsui-gallery-item table td { padding:1px 10px 1px 0;}
        .xsui-gallery-item table th { text-align: right; color:#999;}
        .xsui-clearfix { clear:both;}
    </style>
</block>
<block name="body_main">
    <ul class="xsui-breadcrumb">
        <li><a href="{:U('ProductGoods/product_goods_list')}"><i  class="fa fa-home fa-fw"></i>商品管理</a></li>
        <li class="current">{$product.title}</li>
    </ul>
    <div class="grid-parent xsui-page-header">
        <div class="grid-60 mobile-grid-100 grid-parent">
            <a href="{:U('image_edit','product_id='.$product['id'])}" class="xsui-btn ui-state-default xsui-lnk-add-dialog" title="上传商品图片"><i class="fa fa-plus"></i>上传图片</a>
            <a href="#" class="xsui-btn ui-state-default xsui-lnk-refresh"><i class="fa fa-refresh"></i>刷新</a>
        </div>
        <div class="grid-40 mobile-grid-100 grid-parent xsui-text-right"></div>
    </div>
    <div id="grid-container">
        <div class="xsui-gallery">
            <foreach name="list" item="vo">
                <div class="xsui-gallery-item">                    
                    <a href="{$vo.file_path}" target="_blank" title="{$vo.file_name}"><img src="{$vo.file_path}" alt="{$vo.file_name}" /></a>
                    <table>
                        <tr><th colspan="4" class="title xsui-text-ellipsis"><input type="checkbox" name="id[]" value="{$vo.id}" /><a href="{$vo.file_path}" title="{$vo.title}" target="_blank">{$vo.title}</a></th></tr>
                        <tr>
                            <th>大小：</th><td>{$vo.file_size}</td>
                            <th>扩展名：</th><td>{$vo.file_ext}</td>
                        </tr>
                        <tr>
                            <th>宽度：</th><td>{$vo.image_width}</td>
                            <th>高度：</th><td>{$vo.image_height}</td>
                        </tr>
                        <tr>
                            <th>排序：</th><td class="sort"><input type="text" value="{$vo.sort}" size="3" data-value="{$vo.sort}" data-url="{:U('change_sort','id='.$vo['id'].'&sort=varsort')}" /></td>
                            <th>操作：</th><td><a href="{:U('image_delete','id='.$vo['id'])}" class="xsui-lnk-remove" data-id="{$vo.id}" title="删除 {$vo.title}"><i class="fa fa-remove fa-fw"></i>删除</a></td>
                        </tr>
                    </table>
                </div>
            </foreach>
            <div class="xsui-clearfix"></div>
        </div>
        <div class="xsui-pagination">{$page}</div>
    </div>
</block>
<block name="body_after">    
    <script type="text/javascript">
        $(function () {
            // 动态更改排序 2015-10-24 SoChishun Added.
            $('td.sort input').blur(function () {
                var $input = $(this);
                var old_v = $input.data('value');
                if ($input.val() == old_v) {
                    return;
                }
                $.get($input.data('url').replace('varsort', $input.val()), function (data) {
                    if (data.status) {
                        location.reload();
                    } else {
                        $('<div>' + data.info + '</div>').dialog();
                    }
                })
            })
        })
    </script>
</block>